<template>
  <div class="home">
    <CustomHead />

    <div class="container">
      <div class="remind">
        <div class="item" v-for="(item, index) in remind" @click="toLocation(item)">
          <div class="icon">
            <img :src="item.icon" alt="">
          </div>
          <span class="txt">
            {{ item.text }}
          </span>
          <span class="num" v-if="item.num != 0">{{ item.num }}</span>
          <div class="popup">
            <div class="list">
              <!-- v-if="mess.num != 0 && item.text != '邮件'" -->
              <div class="item" v-if="item.text == '邮件' || mess.num != 0" @click="toNextPage(mess, item.num)"
                v-for="(mess, i) in item.child">
                <span>{{ mess.text }}</span>
                <span class="num" v-if="mess.num !== 0">{{ mess.num }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- // {
        //   text: "课程提醒", num: 5, icon: require("../assets/course.png"), child: [
        //     { text: "下周有5门课", num: 0 },
        //   ]
        // } -->
        <div class="item course" @click="toCoursePage">
          <div class="icon">
            <img src="../assets/course.png" alt="">
          </div>
          <span class="txt">
            课程提醒
            <p>下周有 <span>5</span> 门课</p>
          </span>
        </div>
      </div>
      <div class="row">
        <div class="user" :v-model="userInfo">
          <div class="avatar">
            <img src="../assets/avatar.png" alt="">
            <span>教师:{{ this.$store.getters.username }}</span>
          </div>
          <p>{{ userInfo.realName }}</p>
          <p>{{ userInfo.dptName }}</p>
          <!-- <div class="course" @click="toCoursePage">
            <i class="el-icon-thumb"></i>
            下周有5门课
          </div> -->
          <div class="bottom">
            <div @click="toUser">
              <img src="../assets/my-icon.png" alt="">个人中心
            </div>
            <span class="line">|</span>
            <div @click="onExit">
              <img src="../assets/exit.png" alt="">退出登录
            </div>
          </div>
          <img class="user-bg" src="../assets/user-bg.png" alt="">
        </div>
        <div class="notic box">
          <div class="title">
            <span>通知公告</span>
            <span @click="toNotification" style="" font->更多 >></span>
          </div>
          <div class="notic-content">
            <div class="left">
              <p @click="onChangeNotic(value, key, index)" :class="noticeIndex == index ? 'active' : ''"
                v-for="(value, key, index) in noticCate" :key="index">
                <span>{{ reviseTypes(key) }}</span>
                <span class="no-dot" v-if="value === 0"></span>
                <span class="dot" v-else></span>
              </p>
            </div>
            <div class="list" v-if="noticList.length !== 0">
              <div class="item" @click="toDetail(item.id, item.hasRead, item.scanNum, item.createdAt, item.types)"
                v-for="(item, index) in noticList" :key="index">
                <span>
                  <span class="dot" v-if="item.hasRead === false"></span>
                  <span class="no-dot" v-else></span>
                  {{ item.title }}</span>
                <span>{{ item.createdAt.slice(0, 10) }}</span>
              </div>
            </div>
            <div class="empty" v-else>
              <img src="../assets/empty.png" alt="">
              <span>暂无数据</span>
            </div>
          </div>
        </div>
        <div class="schedule box">
          <div class="title">
            <span>日程管理</span>

            <span>当前：第5周</span>
          </div>
          <div class="week">
            <el-button @click="currentWeek" size="mini">{{ activeVaue }}</el-button>
          </div>
          <div class="bottom">

            <div class="left">
              <v-calendar ref="calendar" @dayclick="onDayClick" color="blue" v-show="!isActive"
                :attributes="attributes">
                <template #day-popover>
                  <div class="list">
                    <div class="item" style="padding: 8px 0;" v-for="i in 3">
                      <span>第1、2节：高等数学;</span>
                    </div>
                  </div>
                </template>
              </v-calendar>
              <v-calendar v-show="isActive" ref="calendar2" class="week-calendar" is-expanded :attributes="attributes2"
                @dayclick="getItinerary" :from-date="attributes[0].dates" title-position="left" :rows="1"
                :masks="{ weekdays: 'WWW', title: 'MM月' }" />
            </div>
            <div class="right">
              <!-- <p class="title">{{ scheduleWeek }}</p> -->
              <div class="list" v-if="scheduleList.length !== 0">
                <div class="item" v-for="(item, index) in scheduleList">
                  <span class="dot undo" v-if="item.status == '待开始'"></span>
                  <span class="dot finished" v-if="item.status == '已完成'"></span>
                  <span class="dot active" v-if="item.status == '进行中'"></span>
                  <span class="time">{{ item.time }}</span>
                  <span class="txt">{{ item.description }}</span>
                </div>
              </div>
              <div class="empty" v-else>
                <img src="../assets/empty.png" alt="">
                <span>暂无数据</span>
              </div>
              <el-button class="add-btn" type="primary" size="mini" round
                @click="scheduleDialogVisible = true">添加日程</el-button>
            </div>
          </div>

        </div>
        <div class="task box">
          <div class="head">
            <div class="title">任务中心</div>
            <div class="tabs">
              <p @click="onChangeTaskTab(index)" :class="taskTabIndex == index ? 'active' : ''"
                v-for="(tab, index) in taskTabs" :key="index">{{ tab }}
                <span class="num" v-if="tab == '待办任务' && taskTableData.length != 0">{{taskUndoNum}}</span>
              </p>
            </div>
            <div @click="toTask" class="more">更多>></div>
          </div>
          <el-table :data="taskTableData" @row-click="handleRowClick">
            <el-table-column label="事项名称" width="180">
              <template slot-scope="scope">
                <div style="display: flex;align-items: center">
                  <!-- <span class="no-dot" v-if="scope.row.hasRead"></span>
                  <span class="dot" v-else></span> -->
                  <span style="margin-left: 10px;flex: 1;text-align: left">{{ scope.row.processName}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="processInstanceSubject" label="主题">
            </el-table-column>
            <el-table-column prop="processInstanceInitiator" label="处理人">
            </el-table-column>
            <el-table-column label="时间">
              <template slot-scope="scope">
                <span v-if="scope.row.processInstanceStartDate">{{ scope.row.processInstanceStartDate.slice(0, 10) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <span style="color: #FEC006;">{{ scope.row.processInstanceStatus }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="application box">
          <div class="title">
            <span>我的应用</span>
            <span @click="toAppCenter">更多 >></span>
          </div>
          <div class="grid">
            <div class="grid-info" v-for="(item, index) in myApps" :key="index">
              <div class="item" @click="toMyApp(item.url)">
                <img :src="item.avatar" alt="">
                <span>{{ item.name }}</span>
              </div>
            </div>
            <!-- <div class="grid-info">
              <div class="item">
                <img src="../assets/edu-admin-icon.png" alt="">
                <span>教务管理系统</span>
              </div>
            </div> -->
            <!-- <div class="grid-info">
              <div class="item">
                <img src="../assets/task.png" alt="">
                <span>任务中心</span>
              </div>
            </div>
            <div class="grid-info">
              <div class="item">
                <img src="../assets/caiwu.png" alt="">
                <span>财务系统</span>
              </div>
            </div>
            <div class="grid-info">
              <div class="item">
                <img src="../assets/shixun.png" alt="">
                <span> 全员实训管理系统</span>
              </div>
            </div> -->
          </div>
        </div>
        <div class="school-recommend box">
          <!-- <div class="title">学校推荐</div> -->
          <div class="title">
            <span>学校推荐</span>
            <span @click="toAppCenter">更多 >></span>
          </div>
          <div class="list">
            <div class="item" v-for="item in hotAppList" :key="item.id">
              <img :src="item.avatar" alt="" @click="toMyApp(item.url)">
              <span @click="toMyApp(item.url)">{{ item.name }}--{{ item.id }}</span>
              <i class="el-icon-star-on" @click="onCollectionApp(item.id)"></i>
            </div>
          </div>
        </div>
        <div class="hot-application box">
          <!-- <div class="title">热门应用</div> -->
          <div class="title">
            <span>热门应用</span>
            <span @click="toAppCenter">更多 >></span>
          </div>
          <div class="list">
            <div class="item" v-for="item in hotAppList" :key="item.id">
              <img :src="item.avatar" alt="" @click="toMyApp(item.url)">
              <span @click="toMyApp(item.url)">{{ item.name }}--{{ item.id }}</span>
              <i class="el-icon-star-on" @click="onCollectionApp(item.id)"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="phone-page">
      <div class="remind">
        <div @click="toNextPhonePage(item.url)" v-for="(item, index) in remindPhone" :key="index">
          <span :class="item.classStyle">{{ item.num }}</span>
          <span>{{ item.text }}</span>
        </div>
      </div>
      <div class="notic-phone">
        <h4>通知</h4>
        <div class="list">
          <div class="item" @click="toDetailPhone(notic.id, notic.hasRead, notic.scanNum, notic.createdAt, notic.types)"
            v-for="notic in noticAllList" :key="notic.id">
            <p :style="{ marginLeft: notic.hasRead ? '10px' : '0' }">
              <span class="dot" v-if="!notic.hasRead"></span>
              <span class="no-dot" v-else></span>
              {{ notic.title }}
            </p>
            <p> <span>{{ notic.createdAt.slice(0, 10) }}</span></p>
          </div>
        </div>
      </div>
      <TabsPhone />
    </div>
    <el-dialog class="schedule-dialog" title="添加日程安排" :visible.sync="scheduleDialogVisible" center>
      <el-form :model="scheduleForm" :rules="scheduleFormRules" ref="scheduleForm" label-width="80px">
        <el-form-item label="日程描述" prop="description">
          <el-input autocomplete="off" v-model="scheduleForm.description"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="startAt" class="start-stop-time">
          <el-date-picker clearable v-model="scheduleForm.startAt" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endAt" class="start-stop-time">
          <el-date-picker clearable v-model="scheduleForm.endAt" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择结束时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="提醒方式" class="way" prop="way">
          <el-radio-group v-model="scheduleForm.way">
            <el-radio label="不提醒"></el-radio>
            <el-radio label="提前10分钟"></el-radio>
            <el-radio label="1天通过站内信提醒"></el-radio>
            <!-- <el-radio label="邮件提醒"></el-radio>
            <el-radio label="短信提醒"></el-radio> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="重复性" class="way" prop="repeat">
          <el-radio-group v-model="scheduleForm.repeat">
            <el-radio label="一次性活动"></el-radio>
            <el-radio label="每天"></el-radio>
            <el-radio label="每周"></el-radio>
            <el-radio label="每月"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="scheduleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onAddScheduleDialog('scheduleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CustomHead from '../components/CustomHead.vue';
import TabsPhone from '../components/TabsPhone.vue';
import { conditionQueryNotice, countNonReadNotice, noticeEdit } from "@/api/notice";
import { msgStatusChange, multiSelect } from "@/api/message";
import { addTask, countTasksNotRead, listInstance, listTask, getUnReadEmailCount, unDoTaskcount } from "@/api/task";
import { listApp } from "@/api/app";
import { getUserById } from "@/api/user"
import { getDptMulti } from "@/api/department"
import moment from 'moment'

import { Calendar as VCalendar } from 'v-calendar';
import { formatTime, formatWeek } from "@/utils/formatTime.js";
import { getCollection, deleteCollection, addCollection } from "@/api/user";
export default {
  name: 'TeacherHome',
  components: {
    CustomHead,
    VCalendar,
    TabsPhone
  },
  updated() {
    if (this.isActive) {
      this.$nextTick((e) => {
        // 在这里可以确认 <v-calendar> 是否已经渲染完成
        // this.$refs.calendar2.firstPage.days = result;
        if (this.weekResult.length > 0) {
          this.$set(this.$refs.calendar2.firstPage, 'days', []);
          this.$set(this.$refs.calendar2.firstPage, 'days', this.weekResult);
          console.log('Calendar should now be rendered:', this.$refs.calendar2, e);
        }
      });
    }
  },
  data() {
    return {
      value2: "",
      scheduleDialogVisible: false,
      noticeIndex: 0,
      remind: [
        {
          text: "CRP邮箱", num: 0, icon: require("../assets/email-icon.png"), url: "http://mail.lzzy.net/"
        },
        {
          text: "edu.cn邮箱", num: 0, icon: require("../assets/email-icon.png"), url: "https://exmail.qq.com/login"
        },
        {
          text: "待办", num: 0, icon: require("../assets/backlog.png"), child: [
            { text: "云杰财务", num: 0 },
            //{ text: "学工信息", num: 10 },
            //{ text: "待办事项", num: 0, url: "http://portal.lzpu.edu.cn/task" },
            // { text: "选课平台", num: 56 },
            // { text: "教务系统", num: 6 },
            // { text: "云杰财务", num: 10 },
            // { text: "云杰财务", num: 10 },
            // { text: "云杰财务", num: 10 }
          ]
        },
        {
          text: "消息", num: 0, icon: require("../assets/message.png"), child: [
            { text: "通知中心", num: 0, url: "http://portal.lzpu.edu.cn/notification" },
            // { text: "一站式", num: 2 },
            // { text: "选课平台", num: 56 },
            { text: "教务系统", num: 0, url: "http://zfjw.lzzy.net/sso/jziotlogin" },
          ]
        },
        // {
        //   text: "课程提醒", num: 5, icon: require("../assets/course.png"), child: [
        //     { text: "下周有5门课", num: 0 },
        //   ]
        // }
      ],
      currentDate: new Date(), // 当前显示的日期
      selectedDate: null,
      selectedWeek: null,
      weekPageStart: null, // 所选周的第一天所在的页面信息
      weekPageEnd: null,   // 所选周的最后一天所在的页面信息
      startOfWeek: null,
      endOfWeek: null,
      isActive: false,
      activeVaue: "日程",
      weekResult: [],
      storeDays: [],
      attributes2: [ // 用于高亮显示的属性
        {
          key: 'today',
          highlight: true,

        },
        {
          highlight: {
            color: 'rgba(255,64,129,0.85)',
            fillMode: 'outline',
          }
        },

      ], attributes: [ // 用于高亮显示的属性
        {
          key: 'today',
          highlight: true,
          dates: new Date()
        },
        {
          popover: {
            // label: "9:00会议",
            visibility: 'hover',
            hideIndicator: true,
          },
          highlight: {
            color: 'red',
            fillMode: 'outline',
          },
          dates: [
            new Date(2024, 7, 12),
            new Date(2024, 8, 29),
            new Date(2024, 8, 6),
          ],
        },
      ],
      selectDay: [], // 假设您想跟踪选定的日期
      dates: [],
      scheduleWeek: "",
      tabsPhone: [
        { text: "首页", icon: "el-icon-s-home", path: "/" },
        { text: "应用", icon: "el-icon-menu", path: "/application-phone" },
        { text: "待办", icon: "el-icon-time", path: "" },
        { text: "我的", icon: "el-icon-user-solid", path: "" },
      ],
      tabsPhoneIndex: 0,
      remindPhone: [
        { text: "邮件", num: 10, classStyle: "email", url: "" },
        { text: "我的待办", num: 5, classStyle: "daiban", url: "" },
        { text: "消息", num: 30, classStyle: "message", url: "" },
        { text: "下周课程", num: 5, classStyle: "email", url: "/nextWeekCourse" },
      ],
      taskTabs: ["待办任务", "已办任务"],
      taskTabIndex: 0,
      TaskTableDataQuery: {
        userCRP: localStorage.getItem("userCRP"),//指派人id
        isFinished: false//  任务状态 ('待开始1', '进行中2', '已完成3', '已取消4')
      },
      taskUndoNum: 0,//未完成任务数量
      taskTableData: [],
      noticCate: [],
      noticList: [],
      noticAllList: [],//手机端通知
      scheduleList: [],
      //热门应用
      hotAppList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      //用户信息
      userInfo: {},
      // 未读消息数
      countNonReadMsg: 0,
      // 未读待办数
      countNonReadPP: 0,
      //添加日程表单数据
      scheduleForm: {
        title: "",
        description: "",
        createdBy: localStorage.getItem("userId"),//创建人id
        startAt: null,
        endAt: null,
        way: "",
        repeat: "",
        // 状态有四种，1是待开始，2是进行中，3是已完成，4是已取消
        status: 1,
        types: "自定义"
      },
      scheduleFormRules: {
        description: [
          { required: true, message: '请输入日程描述', trigger: 'blur' },
        ],
        startAt: [
          { required: true, message: "请选择开始时间", trigger: "blur" }

        ],
        endAt: [
          { required: true, message: "请选择结束时间", trigger: "blur" }
        ],
        way: [
          { required: true, message: '请选择提醒方式', trigger: 'change' }
        ],
        repeat: [
          { required: true, message: '请选择重复性', trigger: 'change' }
        ],
      },
      scheduleStartDate: "",//日程开始时间
      scheduleEndDate: "",//日程结束时间
      myApps: [
        // { name: "内部邮件", url: "http://mail.lzzy.net/", icon: require("../assets/email.png") },
        // { name: "教务管理系统", url: "http://zfjw.lzzy.net/", icon: require("../assets/edu-admin-icon.png") },
      ]
    }
  },
  mounted() {
    this.scheduleWeek = formatWeek(this.currentDate);
    this.getUserInfo();
    this.getNoticList();
    this.getAllNoticList();
    this.getNoticRead();
    this.getNoticeTypes();
    this.getTaskList();
    this.getHotListApp();
    this.getMsgNotRead();
    this.getTaskTableData();
    this.queryEamilCount();
    this.queryYJUndoCount();
    this.getMyApp();
  },
  methods: {
    onDayClick2(day) {
      // 当用户点击某一天时，保存选中的日期
      this.selectedDate = day.date;
    },
    showSelectedWeek() {
      if (!this.selectedDate) return;

      const date = new Date(this.selectedDate);
      const dayOfWeek = date.getDay(); // 获取当前是星期几 (0-6)

      // 设置一周从星期一开始还是星期日，这里假设从星期一开始
      const diff = dayOfWeek === 0 ? -6 : -(dayOfWeek - 1);

      // 计算所选日期所在周的第一天和最后一天
      this.startOfWeek = new Date(date);
      this.endOfWeek = new Date(date);

      this.startOfWeek.setDate(date.getDate() + diff);
      this.endOfWeek.setDate(date.getDate() + diff + 6);

      // 创建一个仅包含该周的日历页面对象
      this.weekPageStart = {
        month: this.startOfWeek.getMonth() + 1, // 注意月份是从0开始计数的
        year: this.startOfWeek.getFullYear(),
        day: this.startOfWeek.getDate()
      };

      this.weekPageEnd = {
        month: this.endOfWeek.getMonth() + 1,
        year: this.endOfWeek.getFullYear(),
        day: this.endOfWeek.getDate()
      };

      // 设置 selectedWeek 以触发新日历的渲染
      this.selectedWeek = true;
    },

    getItinerary(day) {
      this.onDayClick(day)
      // this.attributes[0].dates = new Date(day.date)
      this.weekResult = []
      let weekList = this.getWeekDates(day.id)
      this.$refs.calendar.firstPage.days.map((data, index) => {
        if (weekList.includes(data.id)) this.weekResult.push(Object.assign({}, data))
      })
    },
    openWeekView() {
      let day = this.$refs.calendar.attributes[0].dates
      this.attributes2[0].dates = new Date(day)
      this.weekResult = []
      let weekList = this.getWeekDates(day)
      this.$refs.calendar.firstPage.days.map((data, index) => {
        if (weekList.includes(data.id)) this.weekResult.push(Object.assign({}, data))
      })
    },
    currentWeek() {
      this.isActive = !this.isActive
      if (!this.isActive) {
        this.activeVaue = "日程"
      } else {
        this.activeVaue = "本周日程"
      }
      this.openWeekView()

    },
    getWeekDates(inputDate) {
      // 如果没有提供输入日期，则使用当前日期
      let date = inputDate ? moment(inputDate) : moment();
      // 获取该周周一的日期（假设一周从周一开始）
      const startOfWeek = date.clone().startOf('isoWeek'); // ISO 8601 week starts on Monday
      // 创建一个数组用于存储本周的日期
      const weekDates = [];
      for (let i = 0; i < 7; i++) {
        // 克隆起始日期并添加天数以获得每天的日期
        const currentDate = startOfWeek.clone().add(i, 'days');
        // 格式化日期为 "YYYY-MM-DD HH:mm" 的形式
        weekDates.push(currentDate.format('YYYY-MM-DD'));
      }
      return weekDates;
    },
    toUser() {
      // this.$router.push("/user")
      window.open("/user", '_blank');
    },
    //添加日程
    onAddScheduleDialog(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addTask(this.scheduleForm).then(res => {
            if (res.code == 200) {
              this.$message({
                message: '日程添加成功',
                type: 'success'
              });
              this.$refs[formName].resetFields();
              this.scheduleDialogVisible = false;
              this.getTaskList();
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //获取任务中心的表格数据
    getTaskTableData() {
      listInstance(this.TaskTableDataQuery).then(res => {
        console.log("未完成任务实例", res.data)
        this.taskTableData = res.data;
        if(this.TaskTableDataQuery.isFinished === false && res.data.length != undefined){
          this.taskUndoNum = res.data.length
        }
      })
    },
    //获取用户信息
    getUserInfo() {
      const userId = localStorage.getItem("userId")
      if (userId != undefined) {
        getUserById(userId).then(rsp => {
          if (rsp.code === 200) {
            const user_v = rsp.data;
            console.log("用户信息", user_v)
            localStorage.setItem("userCRP", user_v.username)
            //获取部门信息
            getDptMulti({ id: rsp.data.departmentId }).then(rsp => {
              if (rsp.code === 200) {
                let dptName = rsp.data[0].name
                user_v["dptName"] = dptName
                this.userInfo = user_v
              } else {
                console.log("getDptMulti抛出异常", rsp.exception)
              }
            }).catch(error => {
              console.log("获取部门信息异常:", error)
            });

          } else {
            console.log("getUserById抛出异常", rsp.exception)
          }
        }).catch(error => {
          console.log("通过id获取用户信息异常:", error)
        });
      }
    },
    getHotListApp() {
      listApp(this.queryParams).then(res => {
        this.hotAppList = res.data.records;
      })
    },
    async toDetail(id, hasRead, scanNum, createdDate, types) {
      if (hasRead == 0) {
        // 修改通知已读状态
        msgStatusChange({
          msgId: id,
          rcvUserId: localStorage.getItem("userId"),
          types: "通知公告",
          msgCreatedDate: createdDate,
          secondTypes: types
        }).then(res => {
          console.log(res)
        })
      }
      await noticeEdit({
        id: id,
        scanNum: scanNum + 1
      }).then(() => { })
      // this.$router.push("/noticDetail?id=" + id)
      const url = `/noticDetail?id=${id}`;
      window.open(url, '_blank');
    },
    toDetailPhone(id, hasRead, scanNum, createdDate, types) {
      if (hasRead == 0) {
        // 修改通知已读状态
        msgStatusChange({
          msgId: id,
          rcvUserId: localStorage.getItem("userId"),
          types: "通知公告",
          msgCreatedDate: createdDate,
          secondTypes: types
        }).then(res => {
          console.log(res)
        })
      }
      noticeEdit({
        id: id,
        scanNum: scanNum + 1
      }).then(() => { })
      this.$router.push("/noticDetailPhone?id=" + id)
    },
    // 获取通知类型和未读情况
    getNoticeTypes() {
      const postData = {};
      // todo:: 这里不能直接写死！！！！
      let userId = localStorage.getItem("userId")
      countNonReadNotice(userId).then(res => {
        console.log("总未读数", res.data)
        delete res.data["总未读数"]
        this.noticCate = res.data;
      });
    },
    //查询通知的已读未读状态
    getNoticRead() {

    },
    getNoticList() {
      const postData = {
        types: '公告',
        userId: localStorage.getItem("userId")
      };
      conditionQueryNotice(postData).then(res => {
        this.noticList = res.data;
        if (res.code == 200) {
          this.getNoticRead();
        }
      });
    },
    getAllNoticList() {
      const uid = localStorage.getItem("userId")
      conditionQueryNotice({ userId: uid }).then(res => {
        console.log("所有通知", res.data)
        this.noticAllList = res.data;
        if (res.code == 200) {
          this.getNoticRead();
        }
      });
    },
    onChangeNotic(value, key, index) {
      console.log("切换通知类型", key)
      const postData = {
        types: key,
        userId: localStorage.getItem("userId")
      };
      this.noticeIndex = index;
      conditionQueryNotice(postData).then(res => {
        this.noticList = res.data;
        console.log("切换通知类型tab查询结果", res.data)
        this.getNoticRead();
      });
    },
    //获取未读消息
    getMsgNotRead() {
      const userId = localStorage.getItem("userId")
      if (userId != undefined) {
        let reqObj = {
          receiverId: userId,
          startDate: moment().subtract(7, 'days').format("YYYY-MM-DD HH:mm"),
          endDate: moment().format("YYYY-MM-DD HH:mm"),
          hasRead: false
        }

        countTasksNotRead({ taskType: "待办", userId: userId }).then(rsp => {
          console.log("未读待办", rsp.data)
          if (rsp.code == 200) {
            console.log(this.remind[2])
            this.countNonReadPP = rsp.data;
            this.remind[2].num = rsp.data;
            if (this.remind[2].child[1]) {
              this.remind[2].child[1].num = rsp.data;
            }
          }
        });
        countNonReadNotice(userId).then(rsp => {
          if (rsp.code == 200) {
            this.countNonReadMsg = rsp.data
            this.remind[3].num = rsp.data["总未读数"]
            this.remind[3].child[0].num = rsp.data["总未读数"]
          }
        })

        multiSelect(reqObj).then(rsp => {
          if (rsp.code === 200) {
            let msgData = rsp.data
            console.log("未读消息", msgData)
            this.numOfMNR = msgData.length
            const moneyMsgNum = msgData.filter(item => item.category === '财务').length;
            const teachMsgNum = msgData.filter(item => item.category === '教务').length;
            // this.remind[2].num = msgData.length
            // this.remind[2].child[0].num = moneyMsgNum
            // this.remind[2].child[1].num = teachMsgNum
          }
        })
      }
    },
    //获取任务列表
    getTaskList() {
      const now = new Date();
      const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
      const endOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
      // 或者使用更简单的格式化方法：
      this.scheduleStartDate = `${startOfDay.getFullYear()}-${String(startOfDay.getMonth() + 1).padStart(2, '0')}-${String(startOfDay.getDate()).padStart(2, '0')} 00:00:00`;
      this.scheduleEndDate = `${endOfDay.getFullYear()}-${String(endOfDay.getMonth() + 1).padStart(2, '0')}-${String(endOfDay.getDate()).padStart(2, '0')} ${String(endOfDay.getHours()).padStart(2, '0')}:${String(endOfDay.getMinutes()).padStart(2, '0')}:${String(endOfDay.getSeconds()).padStart(2, '0')}`;
      console.log(this.scheduleEndDate)
      const postData = {
        startDate: this.scheduleStartDate,
        endDate: this.scheduleEndDate,
        createdBy: localStorage.getItem("userId"),//创建人id
      };
      // listTask(postData).then(res => {
      //   this.scheduleList = res.data.map(item => {
      //     console.log('任务列表')
      //     return {
      //       ...item,
      //       time: formatTime(item.startAt)
      //     }
      //   })
      //   console.log(this.scheduleList)
      // });
    },
    onExit() {
      // localStorage.removeItem("ticket");
      // this.$router.push("/")
      this.$store.dispatch('LogOut').then(() => {
        console.log("退出成功")
        window.location.href = 'http://authserver.lzzy.net/authserver/login?service=http://portal.lzpu.edu.cn/';
      });

    },
    toMyApp(url) {
      console.log(url)
      window.open(url, '_blank');
    },
    onDayClick(day) {
      this.selectDay = [{
        id: day.id,
        date: day.date
      }];
      const now = new Date(this.selectDay[0].date);
      const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
      const endOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
      // 或者使用更简单的格式化方法：
      this.scheduleStartDate = `${startOfDay.getFullYear()}-${String(startOfDay.getMonth() + 1).padStart(2, '0')}-${String(startOfDay.getDate()).padStart(2, '0')} 00:00:00`;
      this.scheduleEndDate = `${endOfDay.getFullYear()}-${String(endOfDay.getMonth() + 1).padStart(2, '0')}-${String(endOfDay.getDate()).padStart(2, '0')} ${String(endOfDay.getHours()).padStart(2, '0')}:${String(endOfDay.getMinutes()).padStart(2, '0')}:${String(endOfDay.getSeconds()).padStart(2, '0')}`;
      const postData = {
        startDate: this.scheduleStartDate,
        endDate: this.scheduleEndDate,
        createdBy: localStorage.getItem("userId"),//创建人id
      };
      listTask(postData).then(res => {
        if (res.code == 200) {
          this.scheduleList = res.data.map(item => {
            return {
              ...item,
              time: formatTime(item.startAt)
            }
          })
        }
      });
      this.scheduleWeek = day.ariaLabel;
    },
    goToToday() {
      this.attributes = [];
      this.attributes.push({
        key: 'today',
        highlight: true,
        dates: this.currentDate,
      });
      const calendar = this.$refs.calendar;
      calendar.move(this.currentDate)
      this.scheduleWeek = formatWeek(this.currentDate);

    },
    onChangeTaskTab(index) {
      this.taskTabIndex = index;
      if (index == 0) {
        this.TaskTableDataQuery = {
          userCRP: localStorage.getItem("userCRP"),//指派人id
          isFinished: false//  任务状态 ('待开始1', '进行中2', '已完成3', '已取消4')
        }
      } else if (index == 1) {
        this.TaskTableDataQuery = {
          userCRP: localStorage.getItem("userCRP"),//指派人id
          isFinished: true
        }
      }
      this.getTaskTableData();
    },
    toLocation(item) {
      console.log(item.text)
      if (item.text === "CRP邮箱" || item.text === "edu.cn邮箱") {
        window.open(item.url, '_blank');
      }
    },
    reviseTypes(type) {
      switch (type) {
        case "公告":
          return "公告通知";
        case "院内通知":
          return "校内通知";
        case "院字公文":
          return "校字公文";
        default:
          return type;
      }
    },
    onPhoneChange(i, path) {
      this.$router.push(path)
    },
    toNotification() {
      window.open(window.location.origin + "/notification", '_blank');
    },
    toTask() {
      window.open(window.location.origin + '/task', '_blank');
    },
    //跳转到我的应用
    toAppCenter() {
      // this.$router.push("/applicationCenter")
      window.open('/applicationCenter', '_blank');
    },
    toNextPage(item, num) {
      // location.href = item.url
      window.open(item.url, '_blank');

    },
    //跳转到下周课表
    toCoursePage() {
      // this.$router.push("/nextWeekCourse")
      window.open("nextWeekCourse", '_blank');
    },
    toNextPhonePage(url) {
      this.$router.push(url)
    },
    //任务中心对应行跳转到金智页面
    handleRowClick(row) {
      if (!row.hasRead) {
        // 修改通知已读状态
        msgStatusChange({
          msgId: row.id,
          rcvUserId: localStorage.getItem("userId"),
          types: "待办",
          msgCreatedDate: row.createdAt
        }).then(res => {
          console.log(res)
        })
      }
      window.open(row.processInstanceFormView, '_blank');
    },
    queryYJUndoCount() {
      // 如果要调试，就把 username 设置为 20030005， 普通账号没有权限
      unDoTaskcount({ username: this.$store.getters.username }).then(res => {
        console.log('unDoTaskcount', res);
        // 只有code==0 云杰接口才正常
        if (res.code === 0) {
          //代办数量
          let yjCount = res.data.TaskCount;
          let that = this;
          let k = -1;
          for (var i = 0; i < that.remind.length; i++) {
            if (that.remind[i].text === '待办') {
              // 设置代办外框未读数量
              that.remind[i].num = yjCount;
              k = i;
              break
            }
          }
          if (k >= 0) {
            // 设置代办气泡未读数量
            for (let i = 0; i < that.remind[k].child.length; i++) {
              if (that.remind[k].child[i].text == '云杰财务') {
                that.remind[k].child[i].num = yjCount;
                break
              }
            }
          }
        }
      })
    },
    queryEamilCount() {
      let that = this;
      getUnReadEmailCount({ username: this.$store.getters.username }).then(res => {
        for (var i = 0; i < that.remind.length; i++) {
          if (that.remindPhone[i].text === '邮件') {
            // 设置手机版邮箱未读数量
            // that.remind[i].num = res.total;
          }
        }

        for (let i = 0; i < that.remind.length; i++) {
          if (that.remind[i].text == 'CRP邮箱' || that.remind[i].text == 'edu.cn邮箱') {
            // that.remind[i].num =  res.total;

            let outterMail = null;
            let innerMail = null;
            for (let k = 0; k < res.details.length; k++) {
              if (res.details[k].type == 'wxmail') {
                outterMail = res.details[k]
              } else if (res.details[k].type == 'ewomail') {
                innerMail = res.details[k]
              }
            }
            for (let k = 0; k < that.remind.length; k++) {
              if (that.remind[k].text == 'CRP邮箱') {
                that.remind[k].num = innerMail.count
              } else if (that.remind[k].text == 'edu.cn邮箱') {
                that.remind[k].num = outterMail.count
              }
            }
            break
          }
        }
      })
    },
    //收藏应用
    getMyApp() {
      getCollection().then(res => {
        this.myApps = res.data;
        console.log("我的应用" + this.myApps)
      })
    },
    isCollected(id) {
      return this.myApps.some(item => item.id === id);
    },
    onCollectionApp(id) {
      this.$message.closeAll();
      const isCollected = this.isCollected(id);
      if (isCollected) {
        this.$message.success("此应用已收藏");
      } else {
        addCollection(id).then(res => {
          this.$message.success("收藏成功");
          this.getMyApp();
        })
      }
    },
  }
}
</script>

<style scoped lang="scss">
::-webkit-scrollbar {
  display: none;
}

.home {
  background-color: #F1F3F5;
  min-height: 100vh;
  padding-bottom: 50px;

  .left {
    position: relative;
    margin: 0;
    display: flex;
    justify-content: end;

    ::v-deep .vc-pane {
      //box-shadow: rgba(80, 105, 248, 0.2) 0px 0px 10px;
      border: 1px solid rgb(100, 164, 204) !important;
      border-radius: 5px 0 5px 5px;
      z-index: 1 !important;
    }

    .week-calendar {
      position: absolute !important;
      width: inherit !important;
      height: inherit !important;
      z-index: 1;

      ::v-deep .vc-arrow {
        display: none;
      }
    }
  }

  @include respond-to('phone') {
    min-height: calc(100vh - 50px);
  }

  .container {
    margin: 0 80px;

    @include respond-to('desktop') {
      margin: 0 40px;
    }

    @include respond-to('pad') {
      margin: 0 20px;
    }

    @include respond-to('phone') {
      display: none;
    }

    .remind {
      display: flex;
      margin: 20px 0;
      justify-content: space-between;

      // @include respond-to('desktop') {
      //   margin: 20px 40px 20px 40px;
      // }

      // @include respond-to('pad') {
      //   margin: 20px 20px 20px 20px;
      // }

      &>.item {
        position: relative;
        display: flex;
        box-sizing: border-box;
        background-color: rgba($color: #db0606, $alpha: 0.7);
        color: white;
        height: 140px;
        width: 33%;
        margin-right: 15px;
        padding: 0 10px;
        font-size: 23px;
        align-items: center;

        @include respond-to('pad') {
          font-size: 20px;
        }

        &.course {
          background-color: #3CABFD;

          span {
            p {
              margin-left: 3px;
              font-size: 16px;
              margin-top: 15px;
              // text-decoration: underline;
              // text-underline-offset: 0.8em;
              /* 调整这个值来增加下划线与文字之间的距离 */
              // -webkit-text-underline-offset: 0.5em;

              /* 针对 WebKit 内核浏览器的前缀 */
              &>span {
                font-size: 20px;
                font-weight: bold;
                background-color: #FE4646;
                border-radius: 50%;
                display: inline-block;
                text-align: center;
                line-height: 25px;
                width: 25px;
                height: 25px;
              }
            }
          }
        }

        &:last-child {
          .popup {
            .list {
              justify-content: center !important;
              margin-top: 32px;
            }
          }

        }

        .icon {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 50px;
            margin-right: 8px;
          }
        }

        &:last-child {
          margin-right: 0;
        }

        &:nth-child(3) {
          background-color: rgba($color: #FF8800, $alpha: 0.8);
        }

        &:nth-child(2) {
          background-color: rgba($color: #7259FF, $alpha: 0.9);

        }

        .txt {
          flex: 1;

          .el-button {
            font-size: 28px;
            color: white;
          }
        }

        &>.num {
          position: absolute;
          right: 0;
          top: 0;
          padding: 2px;
          background-color: rgba($color: #FF0000, $alpha: 1);
          font-size: 24px;
          font-weight: bold;
          width: 35px;
          height: 35px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50% 0 50% 50%;
        }

        .popup {
          display: none;
          position: absolute;
          top: 0px;
          left: 0;
          width: 100%;
          min-height: 100%;
          max-height: 500px;
          background-color: rgba(0, 0, 0, 0.7);
          overflow-y: auto;
          z-index: 2;

          &>.list {
            font-size: 16px;
            display: flex;
            padding: 15px;
            color: black;
            height: 100%;
            flex-wrap: wrap;

            .item {
              background-color: #774FA5;
              color: white;
              position: relative;
              width: 31%;
              text-align: center;
              height: 50px;
              line-height: 50px;
              box-sizing: border-box;
              margin-right: 3%;
              margin-bottom: 20px;
              border-radius: 8px;

              &:nth-child(3n) {
                margin-right: 0;
              }

              @include respond-to('pad') {
                width: 48%;
                margin-right: 2%;

                &:nth-child(2n) {
                  margin-right: 0;
                }

                &:nth-child(3n) {
                  margin-right: 2%;
                }
              }

              .num {
                position: absolute;
                right: -4px;
                top: -5px;
                padding: 2px;
                background-color: rgba($color: #FF0000, $alpha: 1);
                font-size: 14px;
                color: white;
                font-weight: bold;
                width: 20px;
                height: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
              }
            }
          }
        }

        &:hover {
          .popup {
            display: block;
          }
        }
      }
    }

    .row {
      display: flex;
      flex-wrap: wrap;
      // margin: 0 80px;

      // @include respond-to('desktop') {
      //   margin: 0px 40px;
      // }

      // @include respond-to('pad') {
      //   margin: 0px 20px;
      // }

      .box {
        box-sizing: border-box;

        .title {
          text-align: left;
          height: 50px;
          line-height: 50px;
          font-weight: bold;
          color: #202020;
          font-size: 20px;


        }

      }

      .user {
        position: relative;
        background-color: #0D67BB;
        width: 220px;
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 15px 50px;
        box-sizing: border-box;
        margin: 0 1% 0 0;
        overflow: hidden;

        .avatar {
          position: relative;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          overflow: hidden;
          margin-bottom: 15px;

          span {
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            background-color: rgba($color: #0D67BB, $alpha: 0.3);
            color: #fff;
            padding: 2px 10px;
            border-radius: 15px;
            font-size: 12px;
            white-space: nowrap;
            width: 100%;
            height: 28%;
            text-align: center;
            padding-top: 10px;
          }

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        p {
          margin-bottom: 15px;
        }

        .course {
          margin-top: 15px;
          font-size: 14px;
          // text-decoration:dotted;
        }

        .bottom {
          display: flex;
          margin-top: 30px;

          &>div {
            display: flex;
            align-items: center;
            font-size: 13px;
            cursor: pointer;

            &:first-child {
              margin-right: 5px;
            }

            &:last-child {
              margin-left: 5px;
            }

            img {
              width: 16px;
              margin-right: 5px;
            }
          }

          .line {
            font-size: 11px;
            display: flex;
            align-items: center;
            margin: 0 8px;
          }
        }

        .user-bg {
          position: absolute;
          bottom: -65px;
          left: -71px;
          right: 0;
          width: 115%;
        }
      }

      .notic {
        box-shadow: 0 0 10px rgba(240, 238, 238, 0.5);
        margin: 0 1% 0 0;
        overflow: hidden;
        width: calc(57% - 220px - 1%);
        height: 400px;
        padding-bottom: 25px;

        @include respond-to('pad') {
          width: calc(100% - 220px - 1%);
          margin: 0;
        }

        .title {
          text-align: left;
          padding-left: 15px;
          height: 50px;
          line-height: 50px;
          font-weight: bold;
          color: #202020;
          font-size: 20px;
          display: flex;
          background-color: white;

          span:first-child {
            flex: 1;
          }

          span:last-child {
            width: 60px;
            font-weight: normal;
            font-size: 14px;
            color: #aca8a8;
          }
        }

        .notic-content {
          font-size: 14px;
          display: flex;
          height: 350px;

          .dot,
          .no-dot {
            display: inline-block;
            width: 5px;
            height: 5px;
            background-color: red;
            border-radius: 50%;
            margin-left: 8px;
            vertical-align: middle;
          }

          .no-dot {
            background-color: #acaebc;
          }

          &>.left {
            display: flex;
            flex-direction: column;
            width: 100px;
            background-color: #F7F8FC;
            flex-shrink: 0;
            height: 100%;

            &>p {
              display: flex;
              align-items: center;
              padding: 15px 0;
              padding-left: 10px;
              flex: 1;

              &.active {
                background-color: #B6DAF9;
              }


            }
          }

          &>.list {
            background-color: white;
            padding: 0 8px 0;
            overflow: auto;
            flex: 1;

            .item {
              display: flex;
              border-bottom: 1px dashed #ebebeb;
              height: 37px;
              line-height: 30px;

              span:first-child {
                flex: 1;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-size: 14px;
                color: #555555;
              }

              span:last-child {
                font-size: 14px;
                color: #999999;
              }
            }
          }

          &>.empty {
            background-color: white;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: gray;

            img {
              width: 60px;
              height: 60px;
              margin-bottom: 20px;
            }
          }
        }
      }

      .schedule {
        background-color: rgba($color: #ffffff, $alpha: 1);
        box-shadow: 0 0 10px rgba(240, 238, 238, 0.5);
        width: 42%;
        padding: 0 10px 25px;
        overflow: hidden;
        height: 400px;

        @include respond-to('pad') {
          width: 100%;
          margin-top: 20px;
        }

        .title {
          text-align: left;
          margin-left: 15px;
          height: 50px;
          line-height: 50px;
          font-weight: bold;
          color: #202020;
          font-size: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          span:last-child {
            font-size: 14px;
            color: #E53E3E;
            margin-right: 8px;
          }
        }

        .week {
          position: relative;
          width: 54.5%;
          height: 12px;
          margin-bottom: 15px;
          display: flex;
          justify-content: right;
          z-index: 10 !important;

          .el-button {
            width: 78px;
            margin: 0 0 0 15px;
            position: absolute;
            font-weight: bold;
            line-height: 12px;
            vertical-align: middle;
            text-align: center;
            border: 1px solid rgb(100, 164, 204);
            border-radius: 5px 5px 0 0;
            border-bottom: none;
            background: rgb(100, 164, 204);
            box-shadow: 0px -1px 3px rgba(100, 164, 204, 0.66);
            color: #FFFFFF;
          }

          .el-button:hover {
            background: rgb(100, 164, 204);
            box-shadow: 0px -5px 7px rgba(100, 164, 204, 0.66);
          }

          ::v-deep .el-button:before {
            content: '';
            position: absolute;
            border-bottom: 0;
            bottom: -3px;
            right: 0;
            /* 小正方形左边距离 */
            width: 100%;
            /* 小正方形宽度 */
            height: 3px;
            /* 边框厚度 */
            background-color: #ffffff;
            /* 假设页面背景色为白色 */
            z-index: 4;
            /* 确保遮罩在大正方形的上边框之上 */
          }
        }

        .bottom {
          display: flex;
          margin-top: 10px;

          .left {
            flex: 1.2;

            .vc-container {
              border: 0;
              width: 100%;

              :deep .vc-dot {
                width: 10px;
                height: 10px;
              }
            }
          }

          .right {
            flex: 1;
            display: flex;
            flex-direction: column;

            .title {
              font-size: 14px;
              font-weight: normal;
            }

            .list {
              margin-top: 20px;
              margin-left: 10px;
              min-height: 200px;
              max-height: 235px;
              overflow: auto;

              .item {
                display: flex;
                align-items: center;
                font-size: 14px;
                margin-bottom: 15px;

                .dot {
                  width: 12px;
                  height: 12px;
                  border-radius: 50%;

                  &.finished {
                    background-color: rgba($color: #333333, $alpha: 0.3);
                  }

                  &.active {
                    background-color: #FF0000;
                  }

                  &.undo {
                    background-color: white;
                    border: 1px solid #0D67BB;
                  }
                }

                .time {
                  margin: 0 10px;
                  width: 40px;
                }

                .txt {
                  flex: 1;
                }
              }
            }

            .empty {
              display: flex;
              justify-content: center;
              flex-direction: column;
              align-items: center;
              color: #3182CE;
              margin: 65px 0 80px;
              font-size: 14px;

              img {
                width: 60px;
                margin-bottom: 15px;
              }
            }

            .add-btn {
              background-color: #0D67BB;
              border-radius: 0;
              width: 100px;
              align-self: center;
              margin-top: 20px;
              padding: 12px 0;
            }
          }

        }
      }

      .task {
        // width: 57%;
        width: 57%;
        box-shadow: 0 0 10px rgba(240, 238, 238, 0.5);
        background-color: white;
        height: 400px;
        padding-right: 15px;
        overflow: hidden;
        margin: 20px 1% 20px 0;

        @include respond-to('pad') {
          width: 65%;
        }

        .head {
          display: flex;
          align-items: center;

          .title {
            text-align: left;
            padding-left: 15px;
            height: 50px;
            line-height: 50px;
            font-weight: bold;
            color: #202020;
            font-size: 20px;
            display: flex;
            background-color: white;

            span:first-child {
              flex: 1;
            }

            span:last-child {
              width: 60px;
              font-weight: normal;
              font-size: 14px;
              color: #aca8a8;
            }
          }

          .tabs {
            margin-left: 15px;
            border-left: 2px solid #0D67BB;
            padding-left: 15px;
            font-size: 18px;
            flex: 1;
            display: flex;

            @include respond-to('pad') {
              font-size: 14px;
            }

            .num {
              background-color: red;
              color: white;
              width: 20px;
              height: 20px;
              border-radius: 50%;
              font-size: 14px;
              text-align: center;
              display: inline-block;
            }

            p {
              cursor: pointer;
              margin-right: 20px;
              color: rgba($color: #333333, $alpha: 0.6);

              &.active {
                color: #FA9E00;
                padding-bottom: 2px;
                font-weight: bold;
                border-bottom: 2px solid #FA9E00;
              }
            }
          }

          .more {
            color: rgba($color: #202020, $alpha: 0.4);
            font-size: 14px;
            cursor: pointer;
          }
        }

        .dot,
        .no-dot {
          display: inline-block;
          width: 5px;
          height: 5px;
          background-color: red;
          border-radius: 50%;
          margin-left: 8px;
          vertical-align: middle;
          margin-right: 8px;
        }

        .no-dot {
          background-color: #acaebc;
        }

        .el-table {
          margin: 0 15px;
          height: 350px;
          overflow: auto;

          :deep .is-leaf,
          :deep td.el-table__cell {
            text-align: center;
          }

          :deep .el-table_1_column_1 {
            &>div {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: normal;
            }
          }

          :deep th.el-table__cell .cell {
            color: rgba($color: #333333, $alpha: 0.5)
          }
        }

      }

      .application {
        background-color: white;
        box-shadow: 0 0 10px rgba(240, 238, 238, 0.5);
        width: 42%;
        padding: 0 10px 0;
        overflow: hidden;
        height: 400px;
        margin-top: 20px;
        box-sizing: border-box;

        @include respond-to('pad') {
          width: 34%;
        }

        .title {
          text-align: left;
          margin-left: 15px;
          height: 60px;
          line-height: 60px;
          font-weight: bold;
          color: #202020;
          font-size: 18px;
          margin-bottom: 10px;
          display: flex;

          span:first-child {
            flex: 1;
          }

          span:last-child {
            width: 60px;
            font-weight: normal;
            font-size: 14px;
            color: #aca8a8;
          }
        }

        .grid {
          display: flex;
          flex-wrap: wrap;

          .grid-info {
            width: 20%;
            margin-bottom: 30px;
            padding: 0 5px;
            box-sizing: border-box;

            @include respond-to('pad') {
              width: 50%;
            }

            .item {
              display: flex;
              justify-content: center;
              flex-direction: column;
              align-items: center;
              text-align: center;

              img {
                width: 40px;
                height: 40px;
                color: #4881EF;
                margin-bottom: 8px;
              }

              span {
                margin-top: 8px;
              }
            }
          }
        }
      }

      .school-recommend {
        margin-right: 1%;
        width: 57% !important;

        .list {
          .item {
            width: 25% !important;
            ;
          }
        }
      }

      .hot-application,
      .school-recommend {
        background-color: white;
        box-shadow: 0 10px rgba(240, 238, 238, 0.5);
        width: 42%;
        padding: 0 10px 0;
        overflow: hidden;
        height: 400px;

        .title {
          text-align: left;
          padding-left: 15px;
          height: 50px;
          line-height: 50px;
          font-weight: bold;
          color: #202020;
          font-size: 20px;
          display: flex;
          background-color: white;

          span:first-child {
            flex: 1;
          }

          span:last-child {
            width: 60px;
            font-weight: normal;
            font-size: 14px;
            color: #aca8a8;
          }
        }

        .list {
          display: flex;
          flex-wrap: wrap;

          .item {
            width: 33%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 15px 0;
            padding: 0 15px;
            box-sizing: border-box;

            @include respond-to('pad') {
              width: 50%;
            }

            img {
              width: 48px;
              height: 48px;
              margin-right: 5px;
            }

            &>span {
              flex: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            i {
              display: none;
              font-size: 22px;
              color: #ACAEBC;
            }

            &:hover {
              i {
                display: block;

                &:hover {
                  color: red;
                }
              }
            }
          }
        }
      }
    }
  }

  //手机端样式
  .phone-page {
    display: none;
    padding-bottom: 30px;

    @include respond-to('phone') {
      display: block;
    }

    .remind {
      display: flex;
      justify-content: space-around;
      margin: 20px 10px 0;
      border-radius: 8px;
      padding: 20px 0;
      background-color: white;
      box-shadow: 0 0 10px rgba(240, 238, 238, 0.5);

      &>div {
        display: flex;
        flex-direction: column;
        align-items: center;

        span:nth-child(1) {
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 10px;
        }

        .email {
          color: red;
        }

        .daiban {
          color: #FA9E00;
        }

        .message {
          color: #4380A8;
        }

        span:nth-child(2) {
          color: gray
        }
      }
    }

    .notic-phone {
      margin: 10px 10px;
      padding: 10px;
      border-radius: 8px;
      background-color: white;

      .list {
        .item {
          display: flex;
          justify-content: space-between;
          margin-top: 15px;
          font-size: 13px;
          color: #484747;

          p:first-child {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            flex: 1;

            .dot,
            .no-dot {
              display: inline-block;
              width: 5px;
              height: 5px;
              margin-right: 2px;
              background-color: red;
              border-radius: 50%;
              margin-left: 8px;
              vertical-align: middle;
            }

            .no-dot {
              background-color: #acaebc
            }
          }

          p:last-child {
            flex-basis: 74px;
            flex-shrink: 0;
          }
        }
      }

    }
  }

  .schedule-dialog {
    :deep .el-dialog {
      width: 40%;

      .el-date-editor.el-input {
        width: 100%;
      }

      .el-dialog--center .el-dialog__body {
        padding: 25px 25px 30px 25px;
      }
    }

    .way {
      .el-radio-group {
        display: flex;
        flex-wrap: wrap;

        .el-radio {
          width: 40%;
          margin-bottom: 15px;
        }
      }
    }

    .start-stop-time {
      .zhi {
        margin: 0 5px;
      }

      // display: flex;
      // :deep .el-date-editor--datetimerange.el-input__inner {
      //   width: 100%;
      // }
      :deep {
        .el-form-item__content {
          display: flex;
        }
      }
    }
  }
}
</style>